<template>
    <div class="character-card" @click="selectCharacter" :class="{ selected: isSelected }">
        <!-- 角色头像 -->
        <div class="character-avatar">
            <van-image :src="character.avatar_url || '/default-character.png'" fit="cover" round width="60" height="60"
                :alt="character.name" />
            <div v-if="character.is_favorited" class="favorite-badge">
                <van-icon name="star" color="#ffd21e" size="16" />
            </div>
        </div>

        <!-- 角色信息 -->
        <div class="character-info">
            <div class="character-header">
                <h3 class="character-name">{{ character.name }}</h3>
                <div class="character-meta">
                    <van-tag :type="getDifficultyType(character.difficulty_level)" size="small">
                        {{ character.difficulty_text }}
                    </van-tag>
                </div>
            </div>

            <div class="character-personality">
                <span class="personality-label">Personality:</span>
                <span class="personality-text">{{ character.personality_type }}</span>
            </div>

            <p class="character-description">{{ character.description }}</p>

            <!-- 角色标签 -->
            <div class="character-tags" v-if="character.tags && character.tags.length > 0">
                <van-tag v-for="tag in character.tags.slice(0, 3)" :key="tag" size="small" plain class="character-tag">
                    {{ tag }}
                </van-tag>
                <span v-if="character.tags.length > 3" class="more-tags">
                    +{{ character.tags.length - 3 }}
                </span>
            </div>

            <!-- 角色统计 -->
            <div class="character-stats">
                <div class="stat-item">
                    <van-icon name="star-o" size="14" />
                    <span>{{ character.rating || 4.5 }}</span>
                </div>
                <div class="stat-item">
                    <van-icon name="chat-o" size="14" />
                    <span>{{ character.total_sessions || 0 }} sessions</span>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="character-actions">
            <van-button size="small" :icon="character.is_favorited ? 'star' : 'star-o'"
                :type="character.is_favorited ? 'warning' : 'default'" @click.stop="toggleFavorite"
                class="favorite-btn">
                {{ character.is_favorited ? 'Favorited' : 'Favorite' }}
            </van-button>
        </div>

        <!-- 选中状态指示器 -->
        <div v-if="isSelected" class="selected-indicator">
            <van-icon name="success" color="#07c160" size="20" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { showToast } from 'vant'
import type { AiCharacter } from '@/api'

interface Props {
    character: AiCharacter
    selected?: boolean
}

interface Emits {
    (e: 'select', character: AiCharacter): void
    (e: 'favorite', character: AiCharacter): void
}

const props = withDefaults(defineProps<Props>(), {
    selected: false
})

const emit = defineEmits<Emits>()

const isSelected = computed(() => props.selected)

const getDifficultyType = (level: number) => {
    if (level <= 2) return 'success'
    if (level <= 3) return 'warning'
    return 'danger'
}

const selectCharacter = () => {
    emit('select', props.character)
}

const toggleFavorite = () => {
    emit('favorite', props.character)
    showToast({
        type: 'success',
        message: props.character.is_favorited ? 'Removed from favorites' : 'Added to favorites'
    })
}
</script>

<style lang="scss" scoped>
.character-card {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    &.selected {
        border-color: #1989fa;
        background: #f0f8ff;
    }

    &:active {
        transform: translateY(0);
    }

    .character-avatar {
        position: relative;
        display: flex;
        justify-content: center;
        margin-bottom: 12px;

        .favorite-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 24px;
            height: 24px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    }

    .character-info {
        .character-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;

            .character-name {
                font-size: 18px;
                font-weight: 600;
                color: #323233;
                margin: 0;
                flex: 1;
            }

            .character-meta {
                margin-left: 8px;
            }
        }

        .character-personality {
            margin-bottom: 8px;
            font-size: 14px;

            .personality-label {
                color: #646566;
                margin-right: 4px;
            }

            .personality-text {
                color: #1989fa;
                font-weight: 500;
            }
        }

        .character-description {
            font-size: 14px;
            color: #646566;
            line-height: 1.5;
            margin: 0 0 12px 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .character-tags {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 12px;
            flex-wrap: wrap;

            .character-tag {
                font-size: 12px;
            }

            .more-tags {
                font-size: 12px;
                color: #969799;
            }
        }

        .character-stats {
            display: flex;
            gap: 16px;
            margin-bottom: 12px;

            .stat-item {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                color: #646566;

                .van-icon {
                    color: #969799;
                }
            }
        }
    }

    .character-actions {
        display: flex;
        justify-content: center;

        .favorite-btn {
            flex: 1;
            max-width: 120px;
        }
    }

    .selected-indicator {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 28px;
        height: 28px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}
</style>